<template>
	<div class="map">
		<!-- <map :latitude="latitude" :longitude="longitude"
		:markers="markers" :show-location="true" @tap="chooseDress"></map> -->
		<map
		id="myMap"
			style="width: 100%; height: 100vh"
			:latitude="location.latitude"
			:longitude="location.longitude"
			:markers="markers"
			show-location
		></map>
		<div class="store" v-if="store.storeId">
			<StoreInfo :store="store" />
		</div>
	</div>
</template>

<script>
import StoreInfo from './components/StoreInfo.vue';
import { parseTime } from './parseTime';
	export default {
		components: {
			StoreInfo
		},
		data() {
			return {
				store: {},
				markers: [],
				location: {}
			}
		},
		onLoad(e) {
			let that = this;
			wx.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				highAccuracyExpireTime: 3500,
				success: function(res) {
					console.warn('test', res)
					that.location = res
					that.getMyStore();
				},
				fail: function(res) {
					console.warn('errr', res)
					that.getMyStore();
				},
			});
		},
		methods: {
			getMyStore() {
				const params = {
					userId: global.userInfo.userId
				};
				if (this.location.longitude) {
					params.longitude = this.location.longitude
					params.latitude = this.location.latitude
				}
				this.$https.get(global.apiUrls.myStore, params).then(res => {
					if (res.data.success) {
						this.markers = [{
							id: 1,
							latitude: Number(res.data.result.latitude),
							longitude: Number(res.data.result.longitude),
							name: res.data.result.storeName,
							width: 68,
							height: 68,
							iconPath: 'https://pics.leshiguang.com/vpage/2024/05/17/d07ebbea19c9433db33fe1277d3f36ed.png'
						}]
						this.location = {
							latitude: Number(res.data.result.latitude),
							longitude: Number(res.data.result.longitude),
						}
						this.store = {...res.data.result, times: parseTime(res.data.result.localBussinessHours)};
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>

.map {
	width: 100%;
	height: 100%;
}

.store {
	border-radius: 16px;
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 42px;
	background: white;
	padding: 16px;
}

</style>
